<script setup>
import { ref } from 'vue'
import { newsGetDetail, newsAdd, newsUpdate, newPictures } from '@/api/news.js'

// 组件状态
const visibleDrawer = ref(false)

// 默认数据
const defaultForm = {
  newsId: '', // 新闻id
  title: '', // 标题
  userId: '', // 用户id
  newsType: '', // 栏目
  number: 0, // 浏览量
  cover: null, // 封面
  publishTime: '', // 发布时间
  newsContent: '', // 新闻内容
  author: '' // 作者
}

// 准备数据
const formModel = ref({ ...defaultForm })

// 图片
const imgURL = ref('')
const onSelectImg = async (uploadFile) => {
  const file = new FormData()
  file.append('file', uploadFile.raw)
  const res = await newPictures(file)
  imgURL.value = res.data
  formModel.value.cover = res.data
}

// 添加修改新闻
const onPublish = async () => {
  if (formModel.value.newsId) {
    await newsUpdate(formModel.value)
    ElMessage.success('修改成功')
  } else {
    await newsAdd(formModel.value)
    ElMessage.success('添加成功')
  }
  visibleDrawer.value = false
}

// 新闻栏目下拉框
const options = [
  { label: '政治', value: '政治' },
  { label: '经济', value: '经济' },
  { label: '科技', value: '科技' },
  { label: '社会', value: '社会' },
  { label: '娱乐', value: '娱乐' },
  { label: '文化', value: '文化' },
  { label: '健康', value: '健康' },
  { label: '科学', value: '科学' },
  { label: '体育', value: '体育' },
  { label: '教育', value: '教育' },
  { label: '国际', value: '国际' },
  { label: '环境', value: '环境' },
  { label: '习言道', value: '习言道' },
  { label: '战略军事', value: '战略军事' },
  { label: '人文历史', value: '人文历史' }
]

const editorOptions = {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ header: 1 }, { header: 2 }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ direction: 'rtl' }],
      [{ size: ['small', false, 'large', 'huge'] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }],
      [{ font: [] }],
      [{ align: [] }],
      ['link', 'image', 'video'],
      ['clean']
    ]
  },
  placeholder: '请输入内容...',
  theme: 'snow'
}

// open方法
const editorRef = ref()
const open = async (row) => {
  visibleDrawer.value = true // 显示抽屉

  if (row.newsId) {
    const res = await newsGetDetail(row.newsId)
    formModel.value = res.data.data
    imgURL.value = formModel.value.cover
  } else {
    formModel.value = { ...defaultForm }
    imgURL.value = ''
    editorRef.value.setHTML('')
  }
}

//暴露open方法
defineExpose({
  open
})
</script>

<template>
  <el-drawer
    v-model="visibleDrawer"
    :title="formModel.newsId ? '编辑文章' : '添加文章'"
    direction="rtl"
    size="50%"
  >
    <!-- 发表文章表单 -->
    <el-form :model="formModel" ref="formRef" label-width="100px">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="formModel.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="文章分类" prop="newsType">
        <el-select v-model="formModel.newsType" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文章封面" prop="cover">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="onSelectImg"
        >
          <img v-if="imgURL" :src="imgURL" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章内容" prop="newsContent">
        <div class="editor">
          <!-- 富文本编辑 -->
          <QuillEditor
            ref="editorRef"
            v-model:content="formModel.newsContent"
            content-type="html"
            theme="snow"
            :options="editorOptions"
          ></QuillEditor>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button v-if="formModel.newsId" @click="onPublish()" type="primary"
          >修改</el-button
        >
        <el-button v-else @click="onPublish()" type="primary">发布</el-button>
        <el-button @click="onPublish()" type="info">草稿</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>
